<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Standard Meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="auther" content="yanming A Web Developer">

  <title>Yummy - A Web Develeper</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="css/site.css">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
  <link rel="stylesheet" type="text/css" href="css/container.css">
  <link rel="stylesheet" type="text/css" href="css/grid.css">
  <link rel="stylesheet" type="text/css" href="css/header.css">
  <link rel="stylesheet" type="text/css" href="css/image.css">
  <link rel="stylesheet" type="text/css" href="css/menu.css">
  <link href="//cdn.bootcss.com/semantic-ui/2.1.8/components/popup.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="css/divider.css">
  <link rel="stylesheet" type="text/css" href="css/dropdown.css">
  <link rel="stylesheet" type="text/css" href="css/segment.css">
  <link rel="stylesheet" type="text/css" href="css/button.css">
  <link rel="stylesheet" type="text/css" href="css/list.css">
  <link rel="stylesheet" type="text/css" href="css/icon.css">
  <link rel="stylesheet" type="text/css" href="css/sidebar.css">
  <link rel="stylesheet" type="text/css" href="css/transition.css">

  <style type="text/css">
    .ui.avatar.image{
    	width: 2.5em;
    	height: 2.5em;
    }
    .masthead.segment {
      min-height: 700px;
      padding: 1em 0em;
    }
    .masthead .logo.item img {
      margin-right: 1em;
    }
    .masthead .ui.menu .ui.button {
      margin-left: 0.5em;
    }
    .masthead h1.ui.header {
      padding: 10px;
      border: 2px solid;
      border-radius: 8px;
      margin-top: 4em;
      margin-bottom: 0em;
      font-size: 4em;
      font-weight: normal;
    }
    .masthead h2 {
      font-size: 1.7em;
      font-weight: normal;
    }
    .ui.vertical.stripe {
      padding: 8em 0em;
    }
    .ui.vertical.stripe h3 {
      font-size: 2em;
    }
    .ui.vertical.stripe .button + h3,
    .ui.vertical.stripe p + h3 {
      margin-top: 3em;
    }
    .ui.vertical.stripe .floated.image {
      clear: both;
    }
    .ui.vertical.stripe p {
      font-size: 1.33em;
    }
    .ui.vertical.stripe .horizontal.divider {
      margin: 3em 0em;
    }

    .quote.stripe.segment {
      padding: 0em;
    }
    .quote.stripe.segment .grid .column {
      padding-top: 5em;
      padding-bottom: 5em;
    }

    .footer.segment {
      padding: 5em 0em;
    }

    .secondary.pointing.menu .toc.item {
      display: none;
    }

    @media only screen and (max-width: 700px) {
      .ui.fixed.menu {
        display: none !important;
      }
      .secondary.pointing.menu .item,
      .secondary.pointing.menu .menu {
        display: none;
      }
      .secondary.pointing.menu .toc.item {
        display: block;
      }
      .masthead.segment {
        min-height: 350px;
      }
      .masthead h1.ui.header {
        padding: 11px;
        border: 1px solid;
        font-size: 2em;
        margin-top: 3.5em;
      }
      .masthead h2 {
        margin-top: 0.5em;
        font-size: 1.5em;
      }
    }
    #blue{
      color: #2185D0;
    }
    #orange{
      color: #F2711C;
    }
    #green{
      color: #B5CC18;
    }
    .thumb{
        color: #DB2828;
        float: right;
    }
    .thumb:hover{
        color: #DB2828;
    }
  </style>
</head>
<body class="pushable">
	<div class="pusher">
  
	  <div class="ui inverted vertical masthead center aligned segment" style="background-image: url(image/bg.jpg);">
	    <div class="ui text container">
	      <h1 class="ui inverted header" style="text-shadow: 0 1px 1px #595959;" id="title">
	        Keep Faith
	      </h1>
	    </div>
	  </div>

	  <div class="ui vertical stripe quote segment">
	    <div class="ui equal width stackable internally celled grid">
	      <div class="center aligned row">
	        <div class="column">
	          <h3>"Stay hungry. Stay foolish."</h3>
	          <p><img src="image/steve.jpg" class="ui avatar image"><b> Steve</b> Jobs</p>
	        </div>
	        <div class="column">
	          <h3>"Shoshin wasuru bekarazu"</h3>
	          <p>
	            <img src="image/head.jpg" class="ui avatar image"><b> Yan</b> Ming's Blog
	          </p>
	        </div>
	      </div>
	    </div>
	  </div>

	  <div class="ui vertical stripe segment">
	    <div class="ui text container">
	      <!-- 日志格式 -->
	      <h3 class="ui header">Breaking The Grid, Grabs Your Attention</h3>
	      <p>Instead of focusing on content creation and hard work</p>
          <h5>
              <i class="fa fa-calendar"></i> 2016-3-25
              <a href="javascript:void(0);" class="thumb"><i class="fa fa-thumbs-o-up"></i> 觉得有用</a>
          </h5>
          <h4 class="ui horizontal divider header">
            <i class="fa fa-tag" id="orange"></i><span id="orange"> HTML </span>
            <i class="fa fa-tag" id="green"></i><span id="green"> CSS</span>
          </h4>
          <button class="ui inverted blue button">Read More</button>

          <h4 class="ui horizontal header divider">
	        <a href="#">Case Studies</a>
	      </h4>
	      
	      <h3 class="ui header">Did We Tell You About Our Bananas?</h3>
	      <p>Yes I know you probably disregarded the earlier boasts as non-sequitor filler content</p>
          <h5>
              <i class="fa fa-calendar"></i> 2016-3-28
              <a href="javascript:void(0);" class="thumb"><i class="fa fa-thumbs-o-up"></i> 觉得有用</a>
          </h5>
          <h4 class="ui horizontal divider header">
            <i class="fa fa-tag" id="blue"></i><span id="blue"> PHP</span>
          </h4>
          <button class="ui inverted blue button">Read More</button>
	    
	    </div>
	  </div>

  <div class="ui inverted vertical footer segment">
    <div class="ui container">
      <div class="ui stackable inverted divided equal height stackable grid">
        <div class="three wide column">
          <h4 class="ui inverted header">About Me</h4>
          <div class="ui inverted link list">
            <a href="#" class="item"><img src="image/head.jpg" class="ui avatar image"></a><br />
            <a href="#" class="item">就读于浙江工业大学</a>
            <a href="#" class="item">计算机科学与技术学院·软件学院、2014级</a>
            <a href="#" class="item">Web前端爱好者</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header">Words</h4>
          <p>把眼前每一件事情做好.</p>
          <p>珍惜身边的人.</p>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header">Share</h4>
          <a href="">
            <button class="ui circular facebook icon button">
              <i class="fa fa-github"></i>
            </button>
          </a>
          <a href="" id="wechat">
            <button class="ui circular linkedin icon button" style="background-color: #1fa67a">
              <i class="fa fa-wechat"></i>
            </button>
          </a>
          <a href="" id="qq">
            <button class="ui circular linkedin icon button">
              <i class="fa fa-qq"></i>
            </button>
          </a>  
          <a href="">
            <button class="ui circular google plus icon button">
            <i class="fa fa-weibo"></i>
            </button>
          </a>
        </div>
      </div>
    </div>
  </div>

</div>
  <script src="js/jquery.min.js"></script>
  <script src="js/visibility.js"></script>
  <script src="js/sidebar.js"></script>
  <script src="js/transition.js"></script>
  <script src="//cdn.bootcss.com/semantic-ui/2.1.8/components/popup.js"></script>
  <script>
    $(document).ready(function () {
        $('.thumb').click(function () {
            $(this).html('<i class="fa fa-thumbs-up"></i> 谢谢鼓励');
        });
        $('#wechat').popup({
            position : 'bottom center',
            title    : 'Wechat:',
            content  : 'amazingym'
        })
        $('#qq').popup({
          position : 'bottom center',
          title    : 'QQ:',
          content  : '644169721'
        })
    });
  </script>
</body>
</html>
